<template>
  <div
    class=""
    :style="{
      height: '100%',
      '--imgw': getscalepx(1),
      '--imgh': getscalepx(3),
      '--imgr': getscalepx(-13),
      '--imgt': getscalepx(-5),
      '--imgp': getscalepx(5),
    }"
  >
    <commondatatable
      :header="header"
      :datalist="datalist"
      :coltype="coltype"
      :nametype="nametype"
      :dtscrolle="dtscrolle"
    />
  </div>
</template>
<script>
import commonmixins from "@/mixins/bigScreen/commonmixins";
import axios from "@/utils/requestdp";
import qs from "qs";

export default {
  name: "commondatatablerelizhan",
  mixins: [commonmixins],
  components: {},
  data() {
    return {
      header: [],
      datalist: [],
      pids: [],
      tableData: [],
      coltype: "",
      nametype: "center",
      dtscrolle: 0,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.coltype = this.componentDetail.coltype
      ? this.componentDetail.coltype
      : "";
    this.nametype = this.componentDetail.nametype
      ? this.componentDetail.nametype
      : "center";
    this.dtscrolle = this.componentDetail.dtscrolle
      ? this.componentDetail.dtscrolle
      : 0;
    let unitcolor = "#56C5FA";
    this.header = [
      {
        name: `<img class="img3" style="width:${this.getscalepx(
          70
        )}" src="/configuration/2d/relizhan.png" />`,
        flex: 15,
      },
      {
        name: `<span class="head">供温</span><span style="color: ${unitcolor};">(℃)</span>`,
        flex: 8,
      },
      {
        name: `<span class="head">回温</span><span style="color: ${unitcolor};">(℃)</span>`,
        flex: 8,
      },
      {
        name: `<span class="head">供压</span><span style="color: ${unitcolor};">(MPa)</span>`,
        flex: 8,
      },
      {
        name: `<span class="head">回压</span><span style="color: ${unitcolor};">(MPa)</span>`,
        flex: 8,
      },
      {
        name: `<span class="head">供水流量</span><span style="color: ${unitcolor};">(T/h)</span>`,
        flex: 10,
      },
    ];
    this.header = this.header.map((item) => {
      item.name = "<div>" + item.name + "</div>";
      return item;
    });
    this.loadData();
    this.interval = setInterval(() => {
      this.loadData();
    }, this.$root.setting.data.interval);
  },
  methods: {
    loadData() {
      let bbb = [];
      this.nameList = [];
      axios.get("/bigScreen/bigScreen").then((res) => {
        // let data = res.data[12].attrValue.split(',');
        let data = res.data
          .filter((v) => v.attrName === "station_pids")[0]
          .attrValue.split(",");
        data.forEach((v) => {
          this.pids.push(v.split("@@")[1]);
          this.nameList.push({
            pid: v.split("@@")[1],
            name: `<span class="name">${v.split("@@")[2]}</span>`,
          });
        });
        // 关联告警
        this.warnListStation = [];
        axios
          .post("/warn/msg/list?pageNum=1&pageSize=3000", {
            objType: "007", // 热力站告警
          })
          .then((rs) => {
            let warnListStation = rs.rows;
            this.warnListStation = warnListStation.filter(
              (w) => this.pids.indexOf(w.pid) > -1
            );
            let formdata = new FormData();
            formdata.append("search", `&pid in (${this.pids.join(",")})`);
            // 查询热源监控
            axios
              .post(
                "/model/substationMonitor?&pageSize=300&pageNum=1",
                formdata
              )
              .then((rs) => {
                if (rs.code == 200) {
                  this.tableData = rs.data;
                  this.nameList.forEach((v, i) => {
                    this.tableData.forEach((v2) => {
                      if (v.pid == v2.pid) {
                        this.nameList[i]["m_001t"] = this.formatVal(
                          v2["m_001t"]
                        );
                        this.nameList[i]["m_002t"] = this.formatVal(
                          v2["m_002t"]
                        );
                        this.nameList[i]["m_001p"] = this.formatVal(
                          v2["m_001p"]
                        );
                        this.nameList[i]["m_002p"] = this.formatVal(
                          v2["m_002p"]
                        );
                        this.nameList[i]["m_003q"] = this.formatVal(
                          v2["m_003q"]
                        );
                      }
                    });
                    if (!("m_001t" in this.nameList[i])) {
                      this.nameList[i][
                        "m_001t"
                      ] = `<span class="default">--</span>`;
                      this.nameList[i][
                        "m_002t"
                      ] = `<span class="default">--</span>`;
                      this.nameList[i][
                        "m_001p"
                      ] = `<span class="default">--</span>`;
                      this.nameList[i][
                        "m_002p"
                      ] = `<span class="default">--</span>`;
                      this.nameList[i][
                        "m_003q"
                      ] = `<span class="default">--</span>`;
                    }
                  });
                  this.nameList.forEach((v, i) => {
                    this.warnListStation.forEach((v2) => {
                      if (v.pid == v2.pid) {
                        let code = v2.code;
                        let codeList = code.split("-");
                        if (codeList[4] == "004") {
                          // 供水温度
                          let m001t = this.delSpan(this.nameList[i]["m_001t"]);
                          this.nameList[i]["m_001t"] = this.formatVal(
                            m001t,
                            String(v2.bound)
                          );
                        } else if (codeList[4] == "005") {
                          // 回水温度
                          let m002t = this.delSpan(this.nameList[i]["m_002t"]);
                          this.nameList[i]["m_002t"] = this.formatVal(
                            m002t,
                            String(v2.bound)
                          );
                        } else if (codeList[4] == "006") {
                          // 供水压力
                          let m001p = this.delSpan(this.nameList[i]["m_001p"]);
                          this.nameList[i]["m_001p"] = this.formatVal(
                            m001p,
                            String(v2.bound)
                          );
                        } else if (codeList[4] == "007") {
                          // 回水压力
                          let m002p = this.delSpan(this.nameList[i]["m_002p"]);
                          this.nameList[i]["m_002p"] = this.formatVal(
                            m002p,
                            String(v2.bound)
                          );
                        }
                      }
                    });
                  });
                  bbb = this.nameList.map((v) => Object.values(v).splice(1));
                  this.datalist = bbb;
                } else {
                  this.datalist = [];
                }
                this.$nextTick(() => {
                  document.querySelector(".img3").style.width = this.getscalepx(
                    70
                  );
                  let defaultList = document.querySelectorAll(".default");
                  let name = document.querySelectorAll(".name");
                  let low = document.querySelectorAll(".low");
                  let high = document.querySelectorAll(".high");
                  let head = document.querySelectorAll(".head");
                  defaultList.forEach((v) => {
                    v.style.fontSize = this.getscalepx(12);
                  });
                  name.forEach((v) => {
                    v.style.fontSize = this.getscalepx(10);
                    v.style.marginTop = this.getscalepx(5);
                    v.parentNode.style.width = "100%";
                    v.parentNode.style.textAlign = "left";
                  });
                  low.forEach((v) => {
                    v.style.fontSize = this.getscalepx(12);
                  });
                  high.forEach((v) => {
                    v.style.fontSize = this.getscalepx(12);
                  });
                  head.forEach((v) => {
                    v.style.fontSize = this.getscalepx(10);
                    v.style.marginTop = this.getscalepx(5);
                  });
                });
              });
          });
      });
    },
    formatVal(item, type) {
      if (type) {
        if (type === "1") {
          return `<span class="" style="color:#A0C8DB;">${item}</span>`;
        } else if (type === "0") {
          return `<span class="" style="color:#A0C8DB;">${item}</span>`;
        }
      } else {
        if (item === null || item === undefined || item == Infinity) {
          return `<span class="" style="color:#A0C8DB;">--</span>`;
        } else {
          return `<span class="" style="color:#A0C8DB;">${item}</span>`;
        }
      }
    },
    // 取html字符串中的值
    delSpan(item) {
      if (item.indexOf("span") > -1) {
        return item.split("</span>")[0].split(">").pop();
      } else {
        return item;
      }
    },
  },
  destroyed() {
    clearInterval(this.interval);
  },
};
</script>
<style lang='scss'>
</style>